<template>
  <div class="admin">
    <div class="header">
      <h3 class="title">管理员工作台</h3>
      <!-- 菜单 -->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="rgb(245, 244, 244)"
      >
        <el-menu-item index="1" @click="tabchange('1')">学生管理</el-menu-item>
        <el-menu-item index="2" @click="tabchange('2')">教师管理</el-menu-item>
        <el-submenu index="3">
          <template slot="title">信息录入</template>
          <el-menu-item index="4" @click="tabchange('4')"
            >学生信息录入</el-menu-item
          >
          <el-menu-item index="5" @click="tabchange('5')"
            >教师信息录入</el-menu-item
          >
        </el-submenu>
      </el-menu>
      <!-- 个人信息 -->
      <el-dropdown>
        <span class="el-dropdown-link">
          当前用户：{{ username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-button
            :plain="true"
            style="border: none; width: 70px; height: 35px"
            @click="exit()"
            >退出</el-button
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="main">
      <!-- 学生列表 -->
      <div class="content-box" v-if="activeIndex == '1'">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search" size="big" placeholder="请输入学生名称" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px; display: flex; align-items: center"
            @click="getStudentList()"
          ></el-button>
        </div>
        <el-table :data="list1" stripe style="width: 100%" v-loading="loading">
          <el-table-column prop="photo" label="照片" width="180">
            <template slot-scope="scope">
              <img
                style="width: 80px; height: 80px"
                :src="petImage(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="studentNo" label="学号" width="180">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="180">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="180">
          </el-table-column>
          <el-table-column prop="onClass" label="班级" width="180">
          </el-table-column>
          <el-table-column prop="passWord" label="密码" width="180">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180">
          </el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="editStu(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteStu(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="getStudentList"
          :current-page.sync="pageNo_stu"
          :page-size="pageSize"
          :total="total_stu"
          layout="total, prev, pager, next"
        ></el-pagination>

        <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          @close="clearComp()"
        >
          <update-stu
            v-if="showComp"
            :item="studentDetail"
            :clearComp="clearComp"
          ></update-stu>
        </el-dialog>
      </div>
      <!-- 教师列表 -->
      <div class="content-box" v-if="activeIndex == '2'">
        <div class="searchBtn" style="display: flex">
          <el-input v-model="search2" size="big" placeholder="请输教师名称" />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px; display: flex; align-items: center"
            @click="getTeacherList()"
          ></el-button>
        </div>
        <el-table :data="list2" stripe style="width: 100%" v-loading="loading">
          <el-table-column prop="photo" label="照片" width="180">
            <template slot-scope="scope">
              <img
                style="width: 80px; height: 80px"
                :src="petImage(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="160">
          </el-table-column>
          <el-table-column prop="teacherNo" label="学号" width="160">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="160">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="160">
          </el-table-column>
          <el-table-column prop="description" label="教师描述" width="160">
          </el-table-column>
          <el-table-column prop="type" label="科目" width="160">
          </el-table-column>
          <el-table-column prop="passWord" label="密码" width="160">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160">
          </el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                @click="editTeacher(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteTeacher(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="getTeacherList"
          :current-page.sync="pageNo_teacher"
          :page-size="pageSize"
          :total="total_teacher"
          layout="total, prev, pager, next"
        ></el-pagination>

        <el-dialog
          :visible.sync="dialogVisible"
          width="50%"
          @close="clearComp()"
        >
          <update-teacher
            v-if="showComp"
            :item="teacherDetail"
            :clearComp="clearComp"
          ></update-teacher>
        </el-dialog>
      </div>

      <div v-if="activeIndex == '4'">
        <add-stu></add-stu>
      </div>

       <div v-if="activeIndex == '5'">
        <add-teacher></add-teacher>
      </div>
    </div>
  </div>
</template>

<script>
import adminRequest from "../request/admin";
import cookie from "js-cookie";
import axios from "../request/axios";
import updateStu from "../components/updateStu.vue";
import addStu from "../components/addStu.vue";
import updateTeacher from "../components/updateTeacher.vue";
import addTeacher from "../components/addTeacher.vue";
export default {
  data() {
    return {
      userinfo: null,
      username: "",
      activeIndex: "1", //菜单下标
      search: "",
      search2: "",
      loading: false, //加载状态控制
      dialogVisible: false, //编辑框开关
      showComp: true, //子组件的开关
      pageSize: 10,

      list1: [],
      pageNo_stu: 1,
      total_stu: null,
      studentDetail: [],

      list2: [],
      pageNo_teacher: 1,
      total_teacher: null,
      teacherDetail: [],
    };
  },

  components: {
    updateStu,
    addStu,
    updateTeacher,
    addTeacher,
  },

  methods: {
    // 菜单切换
    tabchange(index) {
      this.activeIndex = index;
      this.loading = true;
      this.getStudentList();
      this.getTeacherList();
    },

    // 退出
    exit() {
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$message.success("注销成功!");
    },

    // 关闭对话框
    clearComp() {
      this.dialogVisible = false;
      this.showComp = false;
    },

    // 学生
    getStudentList(page = 1) {
      this.pageNo = page;
      adminRequest
        .getStudentList({
          pageNo: this.pageNo_stu,
          pageSize: this.pageSize,
          userName: this.search,
        })
        .then((res) => {
          if (res.data.code == 200) {
            const result = res.data.result;
            this.total_stu = result.total;
            this.list1 = result.records;
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    // 删除
    deleteStu(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          adminRequest.deleteStu(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getStudentList();
            }
          });
        })
        .catch(() => {});
    },

    // 编辑
    editStu(item) {
      this.dialogVisible = true;
      this.showComp = true;
      this.studentDetail = item;
    },

    // 照片
    petImage(index, row) {
      var url =
        axios.defaults.baseURL + "file/getPhoto/" + row.photo;
      console.log(url);
      return url;
    },

    // 教师
    getTeacherList(page = 1) {
      this.pageNo = page;
      adminRequest
        .getTeacherList({
          pageNo: this.pageNo_teacher,
          pageSize: this.pageSize,
          name: this.search2,
        })
        .then((res) => {
          if (res.data.code == 200) {
            const result = res.data.result;
            this.total_teacher = result.total;
            this.list2 = result.records;
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    // 删除
    deleteTeacher(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          adminRequest.deleteTeacher(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getTeacherList();
            }
          });
        })
        .catch(() => {});
    },

    // 编辑
    editTeacher(item) {
      this.dialogVisible = true;
      this.showComp = true;
      this.teacherDetail = item;
    },
  },

  created() {
    this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
    if (
      this.userinfo == null ||
      this.userinfo == "" ||
      this.userinfo.userName != "admin"
    ) {
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$notify({
        title: "您不是管理员，无法访问",
        type: "warning",
      });
    } else {
      if (this.userinfo.type == "teacher") {
        this.$router.push({ path: "/teacherHome" });
      }
      if (this.userinfo.type == "user") {
        this.$router.push({ path: "/" });
      }
      this.username = this.userinfo.userName;
    }
    this.getStudentList();
  },
};
</script>

<style lang="scss" scoped>
@import "../css/adminHome.scss";
</style>